import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, ImagePicker,ActionSheet} from 'antd-mobile';


import NavBarItem from '../../../components/WitNavBar/index'
const Item = List.Item;
let wrapProps;
const empty = require('is-empty');
class myinformmation extends React.Component{

  constructor(props){
    super(props);
    this.state={
      files: [], //头像
    }
  }

  //修改登陆密码
  checkPWD = () =>{
    console.log('password');
    this.props.dispatch(
      routerRedux.push({
        pathname:"/selfinfo/changepwd",
      })
    )
  };
  //修改手机号
  checkPhone = () =>{
    console.log('phone');
    this.props.dispatch(
      routerRedux.push({
        pathname:"/selfinfo/changephone",
      })
    )
  };
  //修改头像
  showPhotoChange =()=>{
    const BUTTONS = ['拍照', '相片', '取消'];
    ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        // title: '标题',
        message: '更改头像',
        maskClosable: true,
        'data-seed': 'logId',
        wrapProps,
      },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      });
  };

  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  };

  //判断对象是否为空
  isEmptyObject(e) {
    let t;
    for (t in e)
      return 0;
    return 1
  };

  render(){
    // const photo = (
    //   <div className={styles.photo}></div>
    // );
    const { files } = this.state;
    const {name,phone,idcard,type,short_name,join_org_date,full_member_date } = this.props.mem;

    const photo =(
      <div>
        <ImagePicker
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 1}
        />
      </div>
    );
    // const name = memName;
    // const position =memJob;
    // const phone = memPhone;
    // const idcard= memIdcard;
    // const dytype= memType;
    // const organisation=memOrg;
    // const rdtime= memIntime;
    // const zztime= memTotime;

    return(
      <div>
        {/*<NavBarItem title="个人详情"/>*/}
        {/*<WhiteSpace size="xl" />*/}
        <List className="my-list">
          {/*<Item extra={photo} style={{height:'2rem'}} onClick={this.showPhotoChange}>{name}</Item>*/}
          <Item  style={{height:'2rem'}}>
            <div style={{position:'absolute',top:'31%',float:'left'}} onClick={this.showPhotoChange}>{name}</div>
            <div style={{position:'relative',left:'70%'}}>{photo}</div>
          </Item>
          <Item extra="党支部书记" >职位</Item>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra={phone} arrow="horizontal" onClick={this.checkPhone} >手机号</Item>
          <div className="IDcardSelf">
            <Item extra={idcard} wrap={true}>身份证号</Item>
          </div>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra={type}>党员类型</Item>
          <div className="rganisation">
            <Item extra={short_name} wrap={true}>所属组织</Item>
          </div>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra={join_org_date} >入党时间</Item>
          <div className="Zztime">
            <Item extra={full_member_date} >转正时间</Item>
          </div>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra='修改' arrow="horizontal" onClick={this.checkPWD}>登陆密码</Item>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">

        </List>
      </div>
    )
  }
}

function mapStateToProps({mem}) {//models
  return {mem}
}
export default connect(mapStateToProps)(myinformmation);
